@import "../../_variables";
@import "../../_mixin";
@import "variables";

.page_5 {

  .page_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 172rem/@base-size;
    height: 133rem/@base-size;

    .swiper-slide-init& {
      animation: page_title_ani .8s;
      animation-fill-mode: both;
      animation-delay: .1s;
    }
  }

  .title_star_line_1, .title_star_line_2 {
    position: absolute;
    width: 67rem/@base-size;
    height: 61rem/@base-size;
  }

  .title_star_line_1 {
    top: 38rem/@base-size;
    left: 34rem/@base-size;
    opacity: 0;

    .swiper-slide-init& {
      animation: title_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: .9s;
    }
  }

  .title_star_line_2 {
    top: 142rem/@base-size;
    left: 10rem/@base-size;
    opacity: 0;

    .swiper-slide-init& {
      animation: title_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: 1.6s;
    }
  }

  .decorate_2 {
    position: absolute;
    top: 0;
    right: 25rem/@base-size;
    width: 100rem/@base-size;
    height: 230rem/@base-size;

    .swiper-slide-init& {
      animation: fadeIn .6s;
      animation-fill-mode: both;
      animation-delay: .9s;
    }
  }

  .decorate_5 {
    position: absolute;
    top: 268rem/@base-size;
    right: -37rem/@base-size;
    width: 349rem/@base-size;
    height: 314rem/@base-size;

    .swiper-slide-init& {
      animation: fadeIn .6s;
      animation-fill-mode: both;
      animation-delay: .9s;
    }
  }

  .content_star_line_1 {
    position: absolute;
    width: 110rem/@base-size;
    height: 14rem/@base-size;
    top: 44rem/@base-size;
    right: 260rem/@base-size;

    .swiper-slide-init& {
      animation: hd_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: 2.3s;
    }
  }

  .content_star_line_2 {
    position: absolute;
    width: 60rem/@base-size;
    height: 13rem/@base-size;
    top: 96rem/@base-size;
    right: 116rem/@base-size;

    .swiper-slide-init& {
      animation: hd_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: 2.8s;
    }
  }

  .content_main {
    position: absolute;
    top: 195rem/@base-size;
    width: 568rem/@base-size;
    height: 710rem/@base-size;
    left: (@layout_main_width - 568) / 2 * 1rem/@base-size;

    .content_item {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .content_item_inner {
      position: relative;
      height: 664rem/@base-size;
    }

    .content_item_child {
      width: 269rem/@base-size;
      height: 317rem/@base-size;
      position: absolute;

      &:first-child {
      }

      &:nth-child(2) {
        right: 0;
        top: 0;
      }

      &:nth-child(3) {
        left: 0;
        bottom: 0;
      }

      &:nth-child(4) {
        right: 0;
        bottom: 0;
      }
    }

    .decorate_1 {
      position: absolute;
      width: 50rem/@base-size;
      height: 50rem/@base-size;
      left: -28rem/@base-size;
      top: 6rem/@base-size;

      .swiper-slide-init& {
        animation: fadeIn .5s;
        animation-fill-mode: both;
        animation-delay: 2s;
      }
    }

    .decorate_3 {
      position: absolute;
      width: 53rem/@base-size;
      height: 46rem/@base-size;
      right: -10rem/@base-size;
      bottom: 60rem/@base-size;

      .swiper-slide-init& {
        animation: fadeIn .5s;
        animation-fill-mode: both;
        animation-delay: 2s;
      }
    }

    .decorate_4 {
      position: absolute;
      width: 60rem/@base-size;
      height: 53rem/@base-size;
      left: -40rem/@base-size;
      bottom: 106rem/@base-size;

      .swiper-slide-init& {
        animation: fadeIn .5s;
        animation-fill-mode: both;
        animation-delay: 2s;
      }
    }

    .water_stripe {
      position: absolute;
      width: 128rem/@base-size;
      height: 38rem/@base-size;
      right: -70rem/@base-size;
      bottom: 178rem/@base-size;
      background-repeat: repeat;
      background-size: auto 100%;

      .swiper-slide-init& {
        animation: fadeIn .5s;
        animation-fill-mode: both;
        animation-delay: 2s;
      }
    }
  }

  .swiper-pagination-bullets {
    .swiper-slide-init& {
      animation: fadeIn .5s;
      animation-fill-mode: both;
      animation-delay: 1.9s;
    }
  }

  @keyframes content_item_child_1 {
    from {
      opacity: 0;
      transform: translate(50%, 50%);
    }

    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

  @keyframes content_item_child_2 {
    from {
      opacity: 0;
      transform: translate(-50%, 50%);
    }

    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

  @keyframes content_item_child_3 {
    from {
      opacity: 0;
      transform: translate(50%, -50%);
    }

    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

  @keyframes content_item_child_4 {
    from {
      opacity: 0;
      transform: translate(-50%, -50%);
    }

    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

  .swiper-slide-init {
    .content_item_child {

      &:first-child {
        animation: content_item_child_1 .5s;
        animation-fill-mode: both;
      }

      &:nth-child(2) {
        animation: content_item_child_2 .5s;
        animation-fill-mode: both;
      }

      &:nth-child(3) {
        animation: content_item_child_3 .5s;
        animation-fill-mode: both;
      }

      &:nth-child(4) {
        animation: content_item_child_4 .5s;
        animation-fill-mode: both;
      }
    }

    &:first-child {
      .content_item_child {
        animation-delay: 1.5s;
      }
    }
  }

  .buttons {
    bottom: 74rem/@base-size;

    .swiper-slide-init& {
      animation: fadeIn .4s, slideInDown .4s;
      animation-fill-mode: both;
      animation-delay: 2s, 2s;
    }
  }
}
